<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业样式.css">
</head>
<body>
    <div class="box">
        <div class="son">
            姓名: <input type="text" class="xm">年龄: <input type="text" class="nl"> 学期: <select class="xq">
                <option selected></option>
                <option>P1</option>
                <option>P2</option>
                <option>P3</option>
                <option>P4</option>
                <option>P5</option>
                <option>P6</option>
            </select><button class="a1" onclick="add()">添加</button><button class="a2" onclick="ob()"></button><span></span>
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>学期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
    var xm=document.querySelector('.xm')
    var nl=document.querySelector('.nl')
    var xq=document.querySelector('.xq')
    var tbody=document.querySelector('tbody')
    var span=document.querySelector('span')
    var a2=document.querySelector('.a2')
    var th=document.querySelector('tbody tr:hover')
    var flag=1;
    //存数据
    function set(data){
        localStorage.setItem('data',JSON.stringify(data))
    }
    //取数据
    function get(){
        var data= localStorage.getItem('data')
        if(data!=null){
            return JSON.parse(data)
        }else{
            return []
        }
    }
    //存储
    function add(){
        if(xm.value.trim()==''&&nl.value.trim()==''&&xq.value.trim()==''){
            span.innerHTML='信息不完整';
        }else{
            span.innerHTML=''
            //获取数据
        var shuju=get()
        //操作数据(添加)
        shuju.push({
            uname:xm.value,
            age:nl.value,
            clazz:xq.value
        })
        //本地存储
        set(shuju)
        xm.value=''
        nl.value=''
        xq.value=''
        //渲染
        xr()
        }
    }
    function xr(){
        //重置
        tbody.innerHTML=''
        //先获取数据
        var shuju=get();
        var a=1;
        //for循环遍历
        for(i=0;i<shuju.length;i++){
            //创建
            var tr=document.createElement('tr')
            //赋值
            tr.innerHTML=`
                    <td>${a++}</td>
                    <td>${shuju[i].uname}</td>
                    <td>${shuju[i].age}</td>
                    <td>${shuju[i].clazz}</td>
                    <td><button onclick="del(${i})">删除</button></td>`;
            //添加
            tbody.appendChild(tr);        
        }
    }
    //全局渲染
    xr();
    function del(aa){
        if(confirm("你确定要删除吗")==true){
            //先获取数据
            var shuju=get();
            //操作数据(删除)
            shuju.splice(aa,1)
            //存储到本地
            set(shuju);
            //渲染
            xr();
        }
    }
    function ob(){
        if(flag==1){
            a2.innerHTML='关闭隔行变色'
            flag=0;
            // th.style=backgroundColor=''
        }else{
            a2.innerHTML='开启隔行变色';
            flag=1;
            // th.style=backgroundColor='red'
        }
    }
    ob()
</script>